<template>
  <view class="home-wrapper">
    <!-- 这里是状态栏,占位的 -->
    <!-- <maya-status-bar></maya-status-bar> -->
    <!-- 背景图片 -->
    <u--image
      src="/static/home/home-bg.png"
      width="100%"
      class="home-bg"
      height="696rpx"></u--image>
    <view class="home-content">
      <!-- 通知 -->
      <home-notice v-if="isLogin" />
      <!-- 被爱认养的猫咪 -->
      <adopted-cat />
      <!-- 分区列表 -->
      <area-list />
      <!-- 猫咪大本营 -->
      <cat-card />
    </view>
    <maya-back-top :scroll-top="scrollTop" />
    <!-- 领养消息飘屏 -->
    <adopt-floating-screen v-if="isLogin" />
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
// import mayaStatusBar from '@/components/mayaStatus-bar.vue';
import mayaBackTop from '@/components/maya-back-top.vue';
import homeNotice from './components/notice.vue';
import adoptedCat from './components/adopted-cat.vue';
import areaList from './components/area-list.vue';
import catCard from './components/cat-card.vue';
import adoptFloatingScreen from './components/adopt-floating-screen.vue';
export default {
  components: {
    homeNotice,
    // statusBar,
    adoptedCat,
    areaList,
    catCard,
    mayaBackTop,
    adoptFloatingScreen,
  },
  data() {
    return {
      scrollTop: 0,
    };
  },
  // 页面滚动到底部的事件
  onReachBottom() {
    uni.$emit('homeOnReachBottom');
  },
  onShow() {
    uni.$emit('homeOnShow');
  },
  onPageScroll(e) {
    // 节流
    uni.$u.throttle(() => {
      this.scrollTop = e.scrollTop;
    }, 500);
  },
  computed: {
    ...mapGetters(['isLogin']),
  },
  methods: {},
};
</script>

<style lang="scss">
.home-wrapper{
	min-height: 100vh;
	padding: 0 $padding;
	box-sizing: border-box;
	.home-content{
		position: relative;
		z-index: 1;
	}
	.home-bg{
		position: absolute;
		width: 100%;
		left:0;
		top: 0;
	}
}
</style>
